import React, { Component } from 'react';
import TheTable from "@/components/TheTable"
import TheButton from '@/components/TheButton';
import ThePagination from '@/components/ThePagination';
import { Button, Form, Input, Modal, Select } from "antd";
import { apiGetTSysDictionariesList, apiGetTSysDictionariesAdd, apiGetTSysDictionariesEdit, apiGetTSysDictionariesDel } from '@/request/Dictionaries'

const { Option } = Select
export default class CameraConfig extends Component {
    constructor() {
        super()
        this.state = {
            columns: [
                {
                    title: "延迟原因",
                    dataIndex: "value",
                    key: "value",
                },
                {
                    title: "操作",
                    render: (text) => {
                        return (
                            <div>
                                <TheButton hasPermi={['lateshipment:edit']} onClick={() => this.edit(text.dictionariesId)}>编辑</TheButton>
                                <TheButton hasPermi={['lateshipment:delete']} onClick={() => this.del(text.dictionariesId)}>删除</TheButton>
                            </div>
                        )
                    }
                }
            ],
            dataSource: [],
            isModalVisible: false,
            modalTitle: '新增',
            loading: false,
            dictionariesId: "",
            lateShipmentName: "lateShipment",
        };
    }
    formRef = React.createRef()

    componentDidMount() {
        this.getData()
    }

    async getData() {
        const { lateShipmentName } = this.state
        let res = await apiGetTSysDictionariesList({
            name: lateShipmentName
        })
        if (res.code === 0) {
            this.setState({
                dataSource: res.data,
            })
        }
    }
    add() {
        this.setState({
            isModalVisible: true,
            modalTitle: '新增'
        }, () => this.resetForm())
    }
    edit(dictionariesId) {
        this.setState({
            isModalVisible: true,
            dictionariesId: dictionariesId,
            modalTitle: '编辑'
        }, async () => {
            let res = await apiGetTSysDictionariesList({ dictionariesId })
            if (res.code === 0) {
                this.formRef.current.setFieldsValue({
                    value: res.data[0].value
                })
            }
        })
    }
    async del(dictionariesId) {
        Modal.confirm({
            title: '提示',
            content: '是否确认删除？',
            onOk: async () => {
                let res = await apiGetTSysDictionariesDel({ dictionariesId })
                if (res.code === 0) {
                    this.setState({
                        isModalVisible: false,
                        dictionariesId: '',
                    }, () => {
                        this.getData()
                    })
                }
            },
            onCancel() {
            },
        });
    }

    handleOk = () => {
        this.formRef.current.validateFields().then(async values => {
            this.setState({
                loading: true
            })
            let res;
            if (this.state.dictionariesId) {
                res = await apiGetTSysDictionariesEdit({ ...values, dictionariesId: this.state.dictionariesId, name: this.state.lateShipmentName })

            } else {
                res = await apiGetTSysDictionariesAdd({ ...values, name: this.state.lateShipmentName })
            }
            if (res.code === 0) {
                React.$message({ type: 'info', content: `${this.state.modalTitle}成功` })
                this.setState({
                    isModalVisible: false,
                    dictionariesId: '',
                    loading: false
                }, () => {
                    this.getData()
                })
            } else {
                this.setState({
                    loading: false
                })
                return React.$message({ type: 'warning', content: res.codeMessage })
            }

        })

    }
    handleCancel = () => {
        this.setState({
            isModalVisible: false,
            dictionariesId: ''
        })
    }
    resetForm() {
        setTimeout(() => {
            this.formRef.current.resetFields();
        }, 1000)
    }

    onFinish = (values) => {
        this.setState({
            dictionariesId: values.dictionariesId ? values.dictionariesId : ''
        }, () => {
            this.getData()
        })

    }
    render() {
        let { columns, dataSource, isModalVisible, modalTitle, loading, } = this.state
        return (
            <div className='p-layout-box ' style={{ overflow: "scroll" }} >
                <div style={{ marginBottom: 20 }}>
                    <TheButton type="default" size="middle" hasPermi={['lateshipment:add']} onClick={() => this.add()} >新增</TheButton>
                </div>
                <TheTable columns={columns} dataSource={dataSource} />
                <Modal title={modalTitle} visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} confirmLoading={loading}>
                    <Form
                        ref={this.formRef}
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="延迟发货原因"
                            name="value"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入延迟发货原因！',
                                },
                            ]}
                        >
                            <Input maxLength={200} />
                        </Form.Item>
                    </Form>
                </Modal>

            </div>
        );
    }
}
